<!-- SysTray.vue -->
<template>
    <div class="tray">
      <img src="/icons/battery.png" title="电池"/>
      <img src="/icons/wifi.png"   title="Wi-Fi"/>
      <img src="/icons/audio.png"  title="音量"/>
      <span>{{ time }}</span>
      <img src="/icons/arrow.png" @click="folded = !folded"/>
      <div v-show="!folded" class="extra">
        <!-- 第三方插件位 -->
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  const time = ref('');
  onMounted(() => setInterval(() => time.value = new Date().toLocaleTimeString(), 1000));
  const folded = ref(true);
  </script>
  
  <style scoped>
  .tray { display: flex; align-items: center; gap: 8px; }
  .extra { position: absolute; right: 0; top: -40px; background: rgba(0,0,0,.6); padding: 8px; border-radius: 8px; }
  </style>